<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Bootstrap Dashboard</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="robots" content="all,follow">
		<!-- Bootstrap CSS-->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<!-- Font Awesome CSS-->
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
		<!-- Fontastic Custom icon font-->
		<link rel="stylesheet" href="css/fontastic.css">
		<!-- Google fonts - Roboto -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
		<!-- jQuery Circle-->
		<link rel="stylesheet" href="css/grasp_mobile_progress_circle-1.0.0.min.css">
		<!-- Custom Scrollbar-->
		<link rel="stylesheet" href="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
		<!-- theme stylesheet-->
		<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
		<!-- Custom stylesheet - for your changes-->
		<link rel="stylesheet" href="css/custom.css">
		<!-- Favicon-->
		<link rel="shortcut icon" href="img/favicon.ico">
		<!-- Tweaks for older IEs-->
		<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<!-- Side Navbar -->
		<nav class="side-navbar">
			<div class="side-navbar-wrapper">
				<!-- Sidebar Header    -->
				<div class="sidenav-header d-flex align-items-center justify-content-center">
					<!-- User Info-->
					<div class="sidenav-header-inner text-center"><img src="img/avatar-7.jpg" alt="person" class="img-fluid rounded-circle">
						<h2 class="h5">Welcome</h2><span id="username"></span>
					</div>
					<!-- Small Brand information, appears on minimized sidebar-->
					<div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong>B</strong><strong
							 class="text-primary">D</strong></a></div>
				</div>
				<!-- Sidebar Navigation Menus-->
				<div class="main-menu">
					<h5 class="sidenav-heading">Main</h5>
					<ul id="side-main-menu" class="side-menu list-unstyled">
						<li><a href="index.html"> <i class="icon-home"></i>Home </a></li>
						<li class="active"><a href="forms.html"> <i class="icon-form"></i>商品管理 </a></li>
						<li><a href="charts.html"> <i class="fa fa-bar-chart"></i>待开发 </a></li>
						<li id="admin"><a href="tables.html"> <i class="icon-grid"></i>用戶管理 </a></li>
						<li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Example
								dropdown </a>
							<ul id="exampledropdownDropdown" class="collapse list-unstyled ">
								<li><a href="#">Page</a></li>
								<li><a href="#">Page</a></li>
								<li><a href="#">Page</a></li>
							</ul>
						</li>
						<li> <a href="#"> <i class="icon-mail"></i>Demo
								<div class="badge badge-warning">6 New</div></a></li>
					</ul>
				</div>
				<div class="admin-menu">
					<h5 class="sidenav-heading">Second menu</h5>
					<ul id="side-admin-menu" class="side-menu list-unstyled">
						<li> <a href="#"> <i class="icon-screen"> </i>Demo</a></li>
						<li> <a href="#"> <i class="icon-flask"> </i>Demo
								<div class="badge badge-info">Special</div></a></li>
						<li> <a href=""> <i class="icon-flask"> </i>Demo</a></li>
						<li> <a href=""> <i class="icon-picture"> </i>Demo</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="page">
			<!-- navbar-->
			<header class="header">
				<nav class="navbar">
					<div class="container-fluid">
						<div class="navbar-holder d-flex align-items-center justify-content-between">
							<div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html"
								 class="navbar-brand">
									<div class="brand-text d-none d-md-inline-block"><span>商品 </span><strong class="text-primary">管理系统</strong></div>
								</a></div>
							<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
								<!-- Log out-->
								<li class="nav-item"><a href="#" onclick="logout()" class="nav-link logout"> <span class="d-none d-sm-inline-block">Logout</span><i
										 class="fa fa-sign-out"></i></a></li>
							</ul>
						</div>
					</div>
				</nav>
			</header>
			<!-- 导航-->
			<div class="breadcrumb-holder">
				<div class="container-fluid">
					<ul class="breadcrumb">
						<li class="breadcrumb-item"><a href="index.html">Home</a></li>
						<li class="breadcrumb-item active">Forms </li>
					</ul>
				</div>
			</div>

			<!--主体-->
			<div>
				<input id="add" type="button" class="btn btn-info" value="新增" onclick="add()" />
				<input id="selectAll" type="button" class="btn btn-info" value="所有记录" onclick="selectAll()" />
				<input id="bianji" type="button" class="btn btn-info" value="待编辑的" onclick="bianji()" />
				<table id="table" class="table table-bordered table-hover">

				</table>
			</div>

			<!-- 页脚 -->
			<footer class="main-footer">
				<div class="container-fluid">
					<p style="text-align: center;">页脚</p>
				</div>
			</footer>
		</div>
		<!-- JavaScript files-->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/popper.js/umd/popper.min.js"> </script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
		<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
		<script src="vendor/chart.js/Chart.min.js"></script>
		<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
		<script src="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
		<!-- Main File-->
		<script src="js/front.js"></script>
	</body>

	<script type="text/javascript">
		var name = "";
		//权限
		var a = "n";
		var b = "n";
		var c = "n";
		var admin = false;
		//页面加载时调用
		$(function() {
			islogin();
			QUANXIAN();
		});

		//加载完成后
		$(document).ready(function() {

		});

		//权限判断
		function QUANXIAN() {
			$.ajax({
				url: "http://localhost:8080/user/session",
				data: null,
				async: false,
				success: function(data) {
					console.log(data.data);
					//权限
					a = data.data.user_edit_top;
					b = data.data.user_edit_middle;
					c = data.data.user_edit_below;
					admin = data.data.user_edit_admin;
					name = data.data.user_name;
					console.log(a, b, c, name, admin);
					//判断是否为管理员
					if (!admin) {
						$("#admin").remove();
					}
				},
				error: function(e) {
					alert("出错");
					alert(e.responseText);
				},
			})
		}

		//删除
		function delectItem(id) {
			//是否具有删除权限
			if (admin) {
				//删除
				$.ajax({
					url: "http://localhost:8080/items/delete?ID=" + id,
					success: function(data) {
						alert(data.msg);
						window.location.reload()
					}
				})
			} else {
				alert("对不起你没有管理员权限...")
			}
		}

		//是否登录
		function islogin() {
			$.ajax({
				url: "http://localhost:8080/items/show",
				data: null,
				async: false,
				success: function(data) {
					console.log(data);
					if (data.status == 201) {
						alert(data.msg);
						window.location = "http://localhost:8080/cadiEditSoftware/login.html"
					}
					if (data.status == 200) {
						// alert(data.msg);
						// alert(data.data);//用户名
						$("#username").text(data.data);
						// selectUserAll();
						// $("#qdl").hide();
						// $("h1").html("<span>欢迎你&nbsp;</span>" + data.data).css('color', 'red');
						// document.getElementById("logout").style.display = "block";
						//查询所有记录
						selectAll();
					}

				},
				error: function(e) {
					alert("出错");
					alert(e.responseText);
					window.location = "http://localhost:8080/demo/login.html"
				},
			})
		}


		//查询所有记录
		function selectAll() {
			let tBody = $("#table");
			tBody.empty();
			$.ajax({
				url: "http://localhost:8080/items/selectAll",
				success: function(data) {
					console.log(data.data)
					//拿到用的信息
					let list = data.data;
					tBody.append(addTabelOnne());
					//迭代list集合 追加新内容
					list.forEach(item => { //item代表集合中的一个元素
						console.log(item.id);
						tBody.append(doCreateRow(item))
						// console.log(tBody)
					})
				},
				error: function(e) {

				},
			})
		}

		//添加表格第一行
		function addTabelOnne() {
			return `<tr>
						<td>编号</td>
						<td>发起人</td>
						<td>权限1</td>
						<td>权限1</td>
						<td>权限2</td>
						<td>权限2</td>
						<td>权限3</td>
						<td>权限3</td>
						<td>修改</td>
						<td>删除</td>
					</tr>`;
		}

		//添加表格
		function doCreateRow(item) {
			var a = "t" + `${item.id}`;
			return `<tr id="` + a +
				`">
 					<td>${item.id}</td>
 					<td>${item.create}</td>
 					<td>${item.role_A_1}</td>
 					<td>${item.role_A_2}</td>
 					<td>${item.role_B_1}</td>
 					<td>${item.role_B_2}</td>
 					<td>${item.role_C_1}</td>
 					<td>${item.role_C_2}</td>
 					<td><Button class='btn-primary' onclick="updataItemById(${item.id})">编辑</td>
 					<td><Button class='btn-danger' onclick="delectItem(${item.id})">删除</td>
 				</tr>`
		};

		//查询待编辑
		function bianji() {
			let tBody = $("#table");
			//删除
			tBody.empty();
			console.log(a,b,c);
			//查询待编辑+添加表格
			$.ajax({
				url: "http://localhost:8080/items/selectByRole?edit_top="+a+"&edit_middle="+b+"&edit_below="+c,
				success: function(data) {
					console.log(data.data)
					//拿到用的信息
					let list = data.data;
					tBody.append(addTabelOnne());
					//迭代list集合 追加新内容
					list.forEach(item => { //item代表集合中的一个元素
						console.log(item.id);
						tBody.append(doCreateRow(item))
						// console.log(tBody)
					})
				}
			})
		}


		//编辑信息
		function updataItemById(id) {
			alert(id);
			window.open('datailitem.html?id=' + id, 'content',
				'width=480,height=400,top=150,left=280, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no'
			);
		}


		//新增用户
		function add() {
			window.open('datailitem.html', 'content',
				'width=480,height=400,top=150,left=280, toolbar=no, menubar=no, scrollbars=auto, resizable=no, location=no, status=no'
			);
		}

		//退出
		function logout() {
			$.ajax({
				url: "http://localhost:8080/user/logout",
				data: null,
				success: function(result) {
					alert("退出成功");
					location.reload();
				},
			})
		}
	</script>
</html>
